<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>编辑 作战图分类</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/jquery-ui/jquery-ui.min.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/jqGrid/css/ui.jqgrid.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/artDialog/skins/simple-star.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/star/css/buttons.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/kindeditor/themes/default/default.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/star/css/editEntityTable.css}" />
<style type="text/css">
  select.fields{
    height: 160px !important;
    width:150px;
  }
  .filedsUl{
    list-style:none;
    padding: 0;
    margin: 0;
  }
  .filedsUl li{
    padding-right: 10px;
    float: left;
    height: 160px;
  }
  .filedsUl li .ontBtn{
    margin-top:3px;
  }
  .filedsUl li .ontBtn .button{
    height:22px;
    padding: 0px 22px;
  }
  .close {
    top: 0px;
}
</style>
</head>
<body>
  <div class="edit-container">
    <form action="" id="editWarCategoryForm">
      <input type="hidden" name="cateId" th:value="${warCategoryResponseDto.cateId}">
      <table class="gy_table" style="width:100%">
        <tr class="nameTr">
          <td><strong>名称：</strong></td>
        </tr>
        <tr class="nameTr">
          <td><input type="text" name="name" placeholder="名称" th:value="${warCategoryResponseDto.name}"></td>
        </tr>
        <tr class="cateIconTr">
          <td><strong>类型：</strong></td>
        </tr>
        <tr class="cateIconTr">
          <td>
            <select name="type">
              <option value="1" th:selected="${warCategoryResponseDto.type==1}">普通图层</option>
              <option value="2" th:selected="${warCategoryResponseDto.type==2}">覆盖物图层</option>
              <option value="3" th:selected="${warCategoryResponseDto.type==3}">内容弹层</option>
            </select>
          </td>
        </tr>
        <tr class="cateIconTr">
          <td>
            <span class="type1">普通图层，可在地图上添加任意多个点，且可以添加字段</span>
            <span class="type2">覆盖物图层，可在地图上添加多张覆盖物图片</span>
            <span class="type3">内容弹层，可编辑一段图文信息</span>
          </td>
        </tr>
        <tr class="cateIconTr type1">
          <td><strong>字段：</strong></td>
        </tr>
        <tr class="cateIconTr type1">
          <td>
            <ul class="filedsUl">
              <li>
                <select class="fields" name="field" multiple size="10">
                  <option th:each="field:${warCategoryResponseDto.fields}" th:text="${field}"></option>
                </select>
              </li>
              <li>
                <div class="ontBtn"><input type="button" class="button green add" value="添加"></div>
                <div class="ontBtn"><input type="button" class="button red del" value="删除"></div>
                <div class="ontBtn"><input type="button" class="button blue top" value="置顶"></div>
                <div class="ontBtn"><input type="button" class="button yellow prev" value="上移"></div>
                <div class="ontBtn"><input type="button" class="button yellow next" value="下移"></div>
                <div class="ontBtn"><input type="button" class="button blue bottom" value="至尾"></div>
              </li>
            </ul>
          </td>
        </tr>
        <tr class="cateIconTr">
          <td><strong>菜单图片：</strong></td>
        </tr>
        <tr class="cateIconTr">
          <td>
            <img th:src="@{/webjars/star/images/uploadBtn.png}" id="uploadCateImgBtn" width="16px"> <span id="cateImgSpan"><img class="dataImg" width="16px" height="16px" th:src="${warCategoryResponseDto.icon}" th:attr="data=${warCategoryResponseDto.icon}"></span><br> 
            <span>菜单图片只支持16*16大小的图片，显示在菜单前面</span>
          </td>
        </tr>
        <tr class="cateIconTr type1">
          <td><strong>标注点图片：</strong><br></td>
        </tr>
        <tr class="cateIconTr type1">
          <td>
            <img th:src="@{/webjars/star/images/uploadBtn.png}" id="uploadOverImgBtn" width="32px"> 
            <span id="overImgSpan">
              <span style="position: relative;" th:if="${warCategoryResponseDto.overIcon != null}">
              <img class="dataImg" width="32px" height="32px" th:src="${warCategoryResponseDto.overIcon}" th:attr="data=${warCategoryResponseDto.overIcon}">
              <div class="close">X</div></span>
            </span><br>
            <span>支持60*60及以下的图片，若不设置，则使用菜单图片</span>
          </td>
        </tr>
        <tr class="cateIconTr">
          <td>
            <strong>描述内容：</strong><br>
          </td>
        </tr>
        <tr class="cateIconTr">
          <td>
            <textarea rows="1" cols="1" name="desc" th:text="${warCategoryResponseDto.desc}"></textarea>
          </td>
        </tr>
        <tr>
          <td>
            <div class="btnGroup">
              <input type="button" value="保存" class="button blue" id="saveBtn"> <input type="button" value="关闭" class="button grey" onclick="art.dialog.close();">
            </div>
          </td>
        </tr>
      </table>
    </form>
  </div>
  <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/artDialog/js/jquery.artDialog.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/artDialog/js/iframeTools.source.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/jquery-validation/dist/jquery.validate.min.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/jquery-validation/dist/additional-methods-local.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/kindeditor/kindeditor-all.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/star/js/star.utils.js}"></script>
  <script type="text/javascript" th:src="@{/js/mgr/warCategory/editWarCategory.js}"></script>
</body>
</html>